<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">

          <a-col :md="6" :sm="8">
            <a-form-item label="数据源从">
              <data-source-select placeholder="请输入数据源从" v-model="queryParam.sourceId1"></data-source-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="目标数据源">
              <data-source-select placeholder="请输入目标数据源" v-model="queryParam.sourceId2"></data-source-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="表名">
              <a-input placeholder="请输入表名" allow-clear v-model="queryParam.tableName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="差异表">
              <a-select allowClear
                        style="width: 100%"
                        placeholder="请选择数据源"
                        v-model="queryParam.diff">
                <a-select-option key="" value="">全部</a-select-option>
                <a-select-option key="0" value="0">有差异</a-select-option>
                <a-select-option key="1" value="1">无差异</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" :loading="loading" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button type="primary" :loading="loading" @click="syncDatasourceTable(queryParam.sourceId1)"> <a-icon
                type="left"/>采集从数据源表 </a-button>
              <a-button type="primary" :loading="loading" @click="syncDatasourceTable(queryParam.sourceId2)">采集目标数据源表 <a-icon
                type="right"/> </a-button>

            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 一共 <a style="font-weight: 600">{{
        totalCount }}</a>项
        <!--<a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="rownum"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
      >
    <span slot="result" slot-scope="text,record">
      <a-tag @click="viewDiff(1,record)" :color="record.columnResult? 'green':'red'">
        {{ record.columnResult?'表字段无差异':'表字段有差异' }}
      </a-tag>
      <a-tag @click="viewDiff(2,record)" :color="record.indexResult? 'green':'red'">
        {{ record.indexResult?'表索引无差异':'表索引有差异' }}
      </a-tag>
      <!--      <a-tag @click="viewDiff(record)" :color="text? 'green':'red'">
              {{ text?'无差异':'有差异' }}
            </a-tag>-->
    </span>
        <!--        <span slot="action" slot-scope="text, record">
              <a-popconfirm title="确定同步到目标数据源吗?" @confirm="() => syncView(record)">
                <a>同步到目标数据源</a>
              </a-popconfirm>
            </span>-->

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <dbmsCompare-modal ref="modalForm" :source1="selectSource1" :source2="selectSource2" :viewDiffUrl="viewDiffUrl"></dbmsCompare-modal>
  </a-card>
</template>

<script>
  import DbmsCompareModal from './modules/DbmsCompareModal'
  import {getAction, httpParamAction} from '@/api/manage'

  export default {
    name: "DbmsTableCompare",
    components: {
      DbmsCompareModal
    },
    data() {
      return {
        /* 查询条件 */
        queryParam: {diff: "0"},
        selectSource1: 0,
        selectSource2: 0,
        viewDiffUrl:'',
        totalCount: 0,
        /* 数据源 */
        dataSource: [],
        loading: false,
        url: {
          mainTableUrl: '/dbms/compareDataSource/table',
          synDbSourceTableUrl: '/dbms/collect/collectTable',
          viewColumnDiff:'/dbms/queryContent/queryTableColumnContent',
          viewIndexDiff:'/dbms/queryContent/queryTableIndexContent',
        },
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* 排序参数 */
        isorter: {
          column: 'createTime',
          order: 'desc',
        },
        /* table选中keys*/
        selectedRowKeys: [],
        /* table选中records*/
        selectionRows: [],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '数据源从表名',
            align: "center",
            dataIndex: 'tableName1'
          },

          {
            title: '从表最后更新时间',
            align: "center",
            dataIndex: 'lastDdlTime1'
          },
          {
            title: '目标数据源表名',
            align: "center",
            dataIndex: 'tableName2'
          },
          {
            title: '目标表最后更新时间',
            align: "center",
            dataIndex: 'lastDdlTime2'
          },
          {
            title: '对比结果',
            align: "center",
            dataIndex: 'result',
            scopedSlots: {customRender: 'result'},
          }/*,
          {
            title: '操作',
            align: "center",
            dataIndex: '',
            scopedSlots: {customRender: 'action'},
          }*/
        ],
      }
    },
    created() {
    },
    methods: {
      syncDatasourceTable(sourceId) {
        if (!sourceId || sourceId == null || sourceId == '') {
          this.$message.warning('请选择数据源');
          return;
        }
        this.loading = true;
        var params = {sourceId: sourceId};
        httpParamAction(this.url.synDbSourceTableUrl, params, 'post').then((res) => {
          this.loading = false;
          this.$message.success('同步成功，请刷新页面');
        })

      },
      viewDiff(type,record) {
        var isDiff=false;
        if(type==1){
          this.viewDiffUrl=this.url.viewColumnDiff;
          isDiff=record.columnResult;
        }else if(type==2){
          this.viewDiffUrl=this.url.viewIndexDiff;
          isDiff=record.indexResult;
        }
        console.log(this.viewDiffUrl);
        var tableName=record.tableName1;
        if(tableName==null||tableName==''){
          tableName=record.tableName2;
        }
        var queryParams={'tableName':tableName};
        this.$refs.modalForm.viewDiff(isDiff,queryParams,this.viewDiffUrl);
      },
      searchQuery() {
        //加载数据 若传入参数1则加载第一页的内容
        var params = this.queryParam;//查询条件
        this.selectSource1 = this.queryParam.sourceId1;
        this.selectSource2 = this.queryParam.sourceId2;
        if (!this.selectSource1 || this.selectSource1 == '' || !this.selectSource2 || this.selectSource2 == '') {
          this.$message.error('请选择数据源');
          return;
        }
        if(this.selectSource1 ==this.selectSource2){
          this.$message.error('不能选择相同的数据源');
          return;
        }
        this.loading = true;
        getAction(this.url.mainTableUrl, params).then((res) => {
          this.dataSource = res.result;
          this.totalCount = res.result.length;
          this.loading = false;
        })
      },
      searchReset() {
        this.queryParam = {}
      },

    }

  }
</script>

<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }

  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }
</style>